<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>首页</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/foot.css">
    <link rel="stylesheet" href="css/yxMobileSlider.css">
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.als-1.7.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/CSSreset.min.css" />
   <link rel="stylesheet" type="text/css" media="screen" href="css/als_demo.css" />
</head>

<body>
    <div class="index_top">
        
        <div class="index_top_right">
            <div class="ss_text">
                <input type="text" placeholder="蛋糕">
            </div>
            <div class="ss_but">搜索</div>
        </div>
    </div>
    <div class="index_banner">
        <div class="slider" style="">
            <ul>
                
                    <a href="#">
                        <li><img src="images/img_topbanner.jpg" width="100%"></li>
                    </a>
                    <a href="#">
                        <li><img src="images/img_topbanner.jpg" width="100%"></li>
                    </a>
                    <a href="#">
                        <li><img src="images/img_topbanner.jpg" width="100%"></li>
                    </a>
                
            </ul>
        </div>
        <script type="text/javascript" src="js/yxMobileSlider.js"></script>
        <script>
            $(".slider").yxMobileSlider({
                width: $(window).width(),
                height: $(window).width()/1.875,
                during: 3000
            })
           
        </script>
    </div>
    
    
    
    
    <div class="container">


<section id="content">
			
		<div class="als-container3" id="demo3">
            <span class="als-prev"><img src="images/thin_left_arrow_333.png" alt="prev" title="previous" /></span>
			  <div class="als-viewport index_caidan">
			    <ul class="als-wrapper" >
			      <li class="als-item">
                       <a href="list.html">
                        <div class="img">
                            <img src="images/index_menu_01.png" alt="">
                        </div>
                        </a>
                    </li>
                    <li class="als-item">
                       <a href="list.html">
                        <div class="img">
                            <img src="images/index_menu_01.png" alt="">
                        </div>
                        </a>
                    </li>
                    <li class="als-item">
                       <a href="list.html">
                        <div class="img">
                            <img src="images/index_menu_01.png" alt="">
                        </div>
                        </a>
                    </li>
                    <li class="als-item">
                       <a href="list.html">
                        <div class="img">
                            <img src="images/index_menu_01.png" alt="">
                        </div>
                        </a>
                    </li>
                    <li class="als-item">
                       <a href="list.html">
                        <div class="img">
                            <img src="images/index_menu_01.png" alt="">
                        </div>
                        </a>
                    </li>
                    
                    <li class="als-item">
                       <a href="list.html">
                        <div class="img">
                            <img src="images/index_menu_01.png" alt="">
                        </div>
                        </a>
                    </li>
			      
			      
			    </ul>
			  </div>
            <span class="als-next"><img src="images/thin_right_arrow_333.png" alt="next" title="next" /></span>
			</div>
        </section>
	</div>
           
    
    
    
    
    <div class="index_caidan" style="display: none;">
        <ul>
            <li>
                <a href="list.html">
                    <div class="img">
                        <img src="images/index_menu_01.png" alt="">
                    </div>
                   
                </a>
            </li>
            <li>
            	<a href="list.html">
                    <div class="img">
                        <img src="images/index_menu_02.png" alt="">
                    </div>
                   
                </a>
            </li>
            <li>
            	<a href="list.html">
                    <div class="img">
                        <img src="images/index_menu_03.png" alt="">
                    </div>
                    
                </a>
            </li>
            <li>
                <a href="list.html">
                    <div class="img">
                        <img src="images/index_menu_04.png" alt="">
                    </div>
                    
                </a>
            </li>
            <li>
                <a href="list.html">
                    <div class="img">
                        <img src="images/index_menu_05.png" alt="">
                    </div>
                    
                </a>
            </li>
        </ul>
    </div>
    
    <div class="guangao">
        <div class="new"><img src="images/index_ttl_new.png" alt=""></div>
        <div class="new1"><img src="images/index_img_01.png" alt=""></div>
        <div class="new1"><img src="images/index_img_02.png" alt=""></div>
    </div>
    <div class="good">
        <img src="images/index_ttl_good.png" alt="">
    </div>
    
    <div class="index_banner2">
        <ul>
            <li class="li_left"><img src="images/index_img_03.png" alt=""><div class="left_top"><img src="images/index_icon_top.png" alt=""><span>1</span>黑森林蛋糕</div></li>
            <li class="li_right"><img src="images/index_img_04.png" alt=""><div class="right_top"><img src="images/index_icon_top.png" alt=""><span>2</span>奶油水果雪糕</div></li>
            <li class="li_left"><img src="images/index_img_05.png" alt=""><div class="left_top"><img src="images/index_icon_top.png" alt=""><span>3</span>百利甜情人</div></li>
            <li class="li_right"><img src="images/index_img_06.png" alt=""><div class="right_top"><img src="images/index_icon_top.png" alt=""><span>4</span>蓝色妖姬翻糖</div></li>
        </ul>
    </div>
    <div class="foot">
        <ul>
            <li>
                <div class="img"><a href="index.html"><img src="images/index_botmenu01off.png" alt=""></a></div>
            </li>
            <li>
                <div class="img"><span>11</span><a href="flow.html"><img src="images/index_botmenu02off.png" alt=""></a></div>
            </li>
            <li>
                <div class="img"><a href="user_order_list.html"><img src="images/index_botmenu03off.png" alt=""></a></div>
            </li>
        </ul>
    </div>
    <script>
        var li=$(".als-wrapper li").length;
        var scrolling_items=0;
        if(li>5){
            li=5;
            scrolling_items=1;
        }
     $(document).ready(function() 
		{
		
				$("#demo3").als({
				visible_items:li,
				scrolling_items: scrolling_items,
				orientation: "horizontal",
				circular: "yes",
				autoscroll: "no",
				start_from: 0
			});
			
		});   
        
    </script>
</body>

</html>
